<script lang="ts" setup>
import { ref } from 'vue'
import validateMap from '@/utils/validate'

interface projectType {
  ProjectName: string
  Price: string
  Type: string
}
const projectForm = ref<projectType>({
  ProjectName: '',
  Price: '',
  Type: ''
})
const projectRules = ref({
  ProjectName: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    {
      validator: (
        rule: any,
        value: string,
        callback: (arg0: Error | undefined) => any
      ) => {
        validateMap.$validLength(value, callback, 20)
      },
      trigger: 'blur'
    }
  ],
  Price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    {
      validator: (
        rule: any,
        value: string,
        callback: (arg0: Error | undefined) => any
      ) => {
        validateMap.$validLength(value, callback, 20)
      },
      trigger: 'blur'
    }
  ],
  Type: [
    { required: true, message: '请输入商品类别', trigger: 'blur' },
    {
      validator: (
        rule: any,
        value: string,
        callback: (arg0: Error | undefined) => any
      ) => {
        validateMap.$validLength(value, callback, 20)
      },
      trigger: 'blur'
    }
  ]
})
const show = ref(false)
const list = ref([
  {
    name: '男'
  },
  {
    name: '女'
  },
  {
    name: '保密'
  }
])
const accountForm = ref<any>(null)
const submit = function () {
  accountForm.value
    .validate()
    .then((res: any) => {
      uni.$u.toast('提交成功')
      uni.navigateBack()
    })
    .catch((errors: any) => {
      uni.$u.toast('校验失败')
    })
}
const selectGoods = function (e: any) {
  projectForm.value.Type = e.name
}
</script>

<template>
  <view class="total">
    <view style="background-color: #fff; padding-left: 34rpx">
      <u-form :model="projectForm" :rules="projectRules" ref="accountForm">
        <u-form-item
          label="项目名称"
          prop="ProjectName"
          labelWidth="242rpx"
          borderBottom
        >
          <u-input
            v-model="projectForm.ProjectName"
            placeholder="请输入项目名称（必填）"
          ></u-input>
        </u-form-item>
        <u-form-item label="价格" prop="Price" labelWidth="242rpx" borderBottom>
          <u-input v-model="projectForm.Price" placeholder="请输入价格（必填）">
            <template #prefix>¥</template>
          </u-input>
        </u-form-item>
        <u-form-item
          label="类别"
          prop="Type"
          labelWidth="242rpx"
          @click="show = true"
        >
          <u-input
            v-model="projectForm.Type"
            placeholder="请选择商品类别（必填）"
            disabled
            disabledColor="#ffffff"
          ></u-input>
          <template #right>
            <view style="margin-right: 30rpx">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </template>
        </u-form-item>
      </u-form>

      <u-action-sheet
        :show="show"
        :actions="list"
        title="请选择商品类别"
        @close="show = false"
        @select="selectGoods"
      ></u-action-sheet>
    </view>
    <u-button @click="submit" type="primary">提交</u-button>
    <navigator open-type="navigateBack">
      <u-button @click="">取消</u-button>
    </navigator>
  </view>
</template>

<style lang="scss" scoped>
.total {
  background-color: #f2f3f6;
  font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
  padding-top: 24rpx;
}
:deep(.u-button--square) {
  margin-top: 24rpx;
  width: 700rpx !important;
}
:deep(.u-form-item__body__right__message) {
  margin-left: 260rpx !important;
  margin-top: -20rpx;
}
.placeholder {
  color: #c0c4cc;
  font-size: 32rpx;
  padding-left: 20rpx;
}
</style>
